<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>table-cell 情况 a标签可以平分 但是button元素不能做到充满平均分</title>
</head>
<body>
    <style>
        html,body{
            margin:0;
            padding:0;
        }
        *{
            box-sizing: border-box;
        }
        .container{
            width:500px;
            border:1px solid red;
            display: table;
        }
        .container > .btn{
            display:table-cell;
            float:none;
        }
        .btn{
            background:lightgreen;
            border:1px solid black;
        }
    </style>
    <div class="container">
        <button class="btn">test1</button>
        <button class="btn">test2</button>
        <button class="btn">test3</button>
    </div>

    <div class="container">
        <a class="btn" href="#">1</a>
        <a class="btn" href="#">2</a>
        <a class="btn" href="#">3</a>
    </div>


    <table class="container">
        <thead>
            <tr>
                <th>row1</th>
                <th>row2</th>
                <th>row3</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>
                    <button class="btn">test1</button>
                </td>
                <td>
                    <button class="btn">test2</button>
                </td>
                <td>
                    <button class="btn">test3</button>
                </td>
            </tr>
        </tbody>

    </table>


</body>
</html>
